<template>
  <view class="addBusiness">
    <!-- 头部 -->
    <view class="addBusiness_header">
      请谨慎选择参与业务并配置成本，选择开通后业务不可删除
    </view>
    <!-- 内容 -->
    <view class="addBusiness_content">
      <!-- :accordion="false"————关闭手风琴效果 -->
      <u-collapse
        :item-style="itemStyle"
        event-type="close"
        :arrow="arrow"
        :accordion="accordion"
        @change="change"
      >
        <u-collapse-item
          :index="index"
          @change="itemChange"
          :title="item.policyName"
          v-for="(item, index) in itemList"
          :key="index"
        >
          <!-- 复选框数据 -->
          <template slot="title-all">
            <u-checkbox-group>
              <u-checkbox
                @change="checkboxChange"
                v-model="item.checked"
                :name="item.policyName"
                >{{ item.policyName }}
              </u-checkbox>
            </u-checkbox-group>
            <view>></view>
          </template>
          <view class="collapse-item">
            <!-- 费率政策内容 -->
            <view class="">
              <!-- 税点 -->
              <view class="flex list-item">
                <view class="flex-1"> 税点 </view>
                <view class="config_content">
                  <u-input
                    class="config_input"
                    placeholder=""
                    :border="border"
                    v-model="item.taxPoint"
                    disabled
                  ></u-input>
                  <text> % </text>
                </view>
              </view>
              <!-- 编辑费率数据 -->
              <view
                class=""
                v-for="(_item, index) in item.costList"
                :key="index"
              >
                <!-- POS -->
                <view class="" v-if="_item.payTypeCode == 'POS'">
                  <view class="" v-if="_item.cardType == '1'">
                    <view class="flex list-item">
                      <view class="flex-1"> 刷卡-贷记卡-T0 </view>
                      <view class="config_content">
                        <u-input
                          class="config_input"
                          :border="border"
                          placeholder=""
                          v-model="_item.t0Rate"
                          :disabled="isDisabled"
                        ></u-input>
                        <text> % </text>
                        <text v-if="isConditionMet !== true"> + </text>
                        <u-input
                          v-if="isConditionMet !== true"
                          class="config_input"
                          :border="border"
                          placeholder=""
                          v-model="_item.cashFee"
                          :disabled="isDisabled"
                        ></u-input>
                        <text v-if="isConditionMet !== true"> 元 </text>
                      </view>
                    </view>
                    <view class="flex list-item">
                      <view class="flex-1"> 刷卡-贷记卡-T1 </view>
                      <view class="config_content">
                        <u-input
                          class="config_input"
                          :border="border"
                          placeholder=""
                          v-model="_item.t1Rate"
                          :disabled="isDisabled"
                        ></u-input>
                        <text> % </text>
                      </view>
                    </view>
                  </view>
                  <view class="" v-if="_item.cardType == '2'">
                    <view class="flex list-item">
                      <view class="flex-1"> 刷卡-借记卡-T0 </view>
                      <view class="config_content">
                        <u-input
                          class="config_input"
                          :border="border"
                          placeholder=""
                          v-model="_item.t0Rate"
                          :disabled="isDisabled"
                        ></u-input>
                        <text> % + </text>
                        <u-input
                          class="config_input"
                          :border="border"
                          placeholder=""
                          v-model="_item.cashFee"
                          :disabled="isDisabled"
                        ></u-input>
                        <text> 元 </text>
                      </view>
                    </view>
                    <view class="flex list-item">
                      <view class="flex-1"> 刷卡-借记卡-T1 </view>
                      <view class="config_content">
                        <u-input
                          class="config_input"
                          :border="border"
                          v-model="_item.t1Rate"
                          placeholder=""
                          :disabled="isDisabled"
                        ></u-input>
                        <text> % </text>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="" v-if="_item.payTypeCode == 'WX'">
                  <view class="flex list-item">
                    <view class="flex-1"> 微信 </view>
                    <view class="config_content">
                      <u-input
                        class="config_input"
                        placeholder=""
                        :border="border"
                        v-model="_item.t1Rate"
                        :disabled="isDisabled"
                      ></u-input>
                      <text> % </text>
                    </view>
                  </view>
                </view>
                <view class="" v-if="_item.payTypeCode == 'ZFB'">
                  <view class="flex list-item">
                    <view class="flex-1"> 支付宝 </view>
                    <view class="config_content">
                      <u-input
                        class="config_input"
                        placeholder=""
                        :border="border"
                        v-model="_item.t1Rate"
                        :disabled="isDisabled"
                      ></u-input>
                      <text> % </text>
                    </view>
                  </view>
                </view>
                <view class="" v-if="_item.payTypeCode == 'YL_CODE_LESS'">
                  <view class="flex list-item">
                    <view class="flex-1"> 银联二维码（≤1000元） </view>
                    <view class="config_content">
                      <u-input
                        class="config_input"
                        placeholder=""
                        :border="border"
                        v-model="_item.t1Rate"
                        :disabled="isDisabled"
                      ></u-input>
                      <text> % </text>
                    </view>
                  </view>
                </view>
                <view class="" v-if="_item.payTypeCode == 'YL_CODE_MORE'">
                  <view class="flex list-item">
                    <view class="flex-1"> 银联二维码（＞1000元） </view>
                    <view class="config_content">
                      <u-input
                        class="config_input"
                        placeholder=""
                        :border="border"
                        v-model="_item.t1Rate"
                        :disabled="isDisabled"
                      ></u-input>
                      <text> % </text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </u-collapse-item>
      </u-collapse>
    </view>
    <!-- 操作按钮 -->
    <view class="handle">
      <u-button @click="handleAddEdit" class="anniu"> 提交 </u-button>
    </view>
    <!-- 模态框 -->
    <u-modal
      v-model="showModal"
      title="温馨提示"
      show-cancel-button
      cancel-text="确定"
      confirm-text="修改成本"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    >
      <view class="add_showModal"
        >添加成功，是否修改新增政策成本，不修改则为本级值相同</view
      >
    </u-modal>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      itemList: [
        {
          policyName: '',
          open: true,
          disabled: true,
        },
        {
          policyName: '',
          open: false,
        },
      ],
      arrow: true,
      accordion: true,
      itemStyle: {
        marginTop: '20px',
      },
      border: true, //input边框
      isDisabled: true, // input框禁用
      isConditionMet: true, // 条件变量，按钮权限切换
      isConditionMet2: true, // 条件变量，按钮权限切换
      agentNo: '', //代理商编号
      showModal: false, //模态框
    };
  },
  // onLoad自带一个参数
  onLoad(options) {
    console.log('options----->252', options);
    // 获取代理商编号
    this.agentNo = options.agentNo;
    this.getQueryAgentNotHasCostConfigList();
  },
  methods: {
    // 查询代理商没有的成本配置
    async getQueryAgentNotHasCostConfigList() {
      const result = await this.$zx.common_api.getQueryAgentNotHasCostConfig(
        this.agentNo
      );
      console.log('getQueryAgentNotHasCostConfig----->265', result);
      // 已有成本赋值给itemList
      this.itemList = result;
      // 遍历数组列表过滤NF和移动数据
      result.forEach((item) => {
        let newList = item.costList.filter((cost) => {
          return (
            cost.payTypeCode !== 'NFC' && cost.payTypeCode !== 'MOBILE_PAY'
          );
        });
        item.costList = newList;
      });
    },
    // 折叠面板事件
    change() {},
    itemChange() {},
    // 复选框数据事件
    checkboxChange(e) {
      console.log('checkboxChange----->280', e);
    },
    // 提交修改事件
    async handleAddEdit() {
      // 显示模态框
      this.showModal = true;
    },
    // 确认提交关闭模态框
    async handleCancel() {
      // 点击取消按钮的处理逻辑
      this.showModal = false; // 关闭模态框
      // 过滤数组列表
      const newChecked = this.itemList.filter((item) => item.checked === true);
      console.log('newChecked----->294', newChecked);
      // 修改成本配置数据接口
      const result = await this.$zx.common_api.editUpdateAgentCost(
        this.agentNo,
        { policyInfoList: newChecked }
      );
      console.log('editUpdateAgentCost----->300', result);
      // 修改成功后提示;
      uni.showToast({
        title: '修改成功',
        duration: 1000,
      });
      setTimeout(() => {
        // 回退页面
        uni.navigateBack({
          delta: 2,
        });
      }, 1000);
    },
    // 修改成本跳转到另一个页面
    async handleConfirm() {
      // 关闭模态框
      this.showModal = false;
      // 过滤数组列表
      const newChecked = this.itemList.filter((item) => item.checked === true);
      console.log('newChecked----->305', newChecked);
      // 修改成本配置数据接口
      const result = await this.$zx.common_api.editUpdateAgentCost(
        this.agentNo,
        { policyInfoList: newChecked }
      );
      console.log('editUpdateAgentCost----->322', result);
      // 跳转页面传递参数
      this.$u.route({
        url: 'pages/main/agent/agentCostAllocationDetailEdit',
        params: {
          agentNo: this.agentNo, // 传递代理商编号
          agentPolicyCostInfo: JSON.stringify(newChecked),
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.addBusiness {
  font-size: 28rpx;
  .addBusiness_header {
    font-size: 24rpx;
    padding: 26rpx 26rpx;
  }
}
::v-deep .addBusiness_content {
  padding: 0rpx 26rpx;
  .u-collapse-item {
    margin-top: 0rpx !important;
    background: white;
    margin-bottom: 16rpx;
    // border-radius: 8rpx;
    .u-collapse-head {
      border-bottom: 1px solid #eeeeee;
      padding: 32rpx 16rpx;
    }
  }
  .collapse-item {
    color: black;
  }
}

// 内容样式
::v-deep .collapse-item {
  height: 780rpx;
  padding: 20rpx 12rpx;
  background-color: white;
  .list-item {
    align-items: center;
    padding: 12rpx 32rpx;
  }
  .config_content {
    display: flex;
    align-items: center;
    .config_input {
      width: 100rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      background: #f6f6f6;
      border: 0rpx solid #dcdfe6;
      .u-input__input {
        text-align: center;
        font-size: 28rpx;
      }
    }
    text {
      margin-left: 10rpx;
    }
  }
}

// 按钮
::v-deep .handle {
  padding: 40rpx 0rpx;
  display: flex;
  left: 50%;
  position: fixed;
  bottom: 20rpx;
  transform: translateX(-50%);
  width: 100%;
  .anniu {
    color: white;
    width: 100%;
    height: 90rpx;
    background: #9d60ff;
    margin: 0rpx 30rpx;
    padding: 10rpx 0rpx;
  }
}
.add_showModal {
  font-size: 28rpx;
  padding: 40rpx 30rpx;
  text-align: center;
}
</style>
